<template>
  <div id='tmpl'> <!-- 渲染的用vue得格式如{{}}表达式 -->
      <div class="title">
          <h4>{{list.title}}</h4>
          <p>发表时间:{{list.add_time | datefmt("YYYY-MM-DD")}} 浏览次数:{{list.click}}</p>
      </div>
      <div class="content" v-html="list.content"></div> <!-- v-html可以渲染带有标签的内容 -->
    <comment :id="id"></comment>   <!-- 放进根元素模板里 -->
  </div>
</template>
<script>
import {Toast} from "mint-ui"
//引入子组件comment
import comment from "../subcom/comment.vue";
export default {
    components:{
        comment //这样的注册子组件直接把import comment...里的comment名对象放进去就可以
    },
  name: "component_name",
  data () {
    return {
        id:0,
        list:{} //对于渲染页面是列表形式时就遍历，如果只是单独的某一条内容就用对象
    };
  },
  created(){
      this.id=this.$route.params.id;
      this.getinfo();
  },
  methods:{
      getinfo(){
          //console.log(this.id)
          var url=this.$common.apidomain+"/api/getnew/"+this.id   //这个this即Vue没有这个属性会去原型查找
          this.$http.get(url).then(res=>{//es6语法
            console.log(res)
            var data = res.body
            if(data.status!=0){
                Toast(data.message);
                return 
            }
            this.list=data.message[0];
            //console.log(this.list)
          })
      }
  }
}
</script>
<style lang="css" scoped>
    /* #tmpl{ //提取到app.vue根组件
        margin-top: 40px;
    } */
    .title{
        color: #9904ff;
    }
    .title p{
        color: rgba(0,0,0,0.5)
    }
    div{
        padding: 10px;
    }
</style>